<template>
	<view class="main">
		<view class="presell-count">
			<view class="spike-bd title-bd">
				<view class="title line1">预售专区</view>
				<navigator url="/pages/activity/presell/index" class="more-btn" hover-class="none">
					更多
					<text class="iconfont icon-jiantou" hover-class="none"></text>
				</navigator>
			</view>
			<view class="wapper_count">
				<view class="spike-wrapper">
					<scroll-view scroll-x="true" style="white-space: nowrap; display: flex" show-scrollbar="false">
						<navigator
							class="spike-item presell-item"
							v-for="(item, index) in presellList"
							:key="index"
							:url="'/pages/activity/presell_details/index?id=' + item.product_presell_id"
							hover-class="none"
						>
							<view class="img-box presell_imgBox">
								<image :src="item.product.image" mode=""></image>
								<view class="box_bg">火热预定中</view>
							</view>
							<view class="info">
								<view class="price-box presell-price">
									<text class="price">
										<text>预售价:￥</text>
										{{ item.price }}
									</text>
									<view class="name line1">{{ item.store_name }}</view>
								</view>
							</view>
						</navigator>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		presellList: {
			type: Array,
			default: () => {
				return [];
			}
		}
	}
};
</script>

<style scoped lang="scss">
@import '../style/main.scss';

.presell-count {
	background-color: #fff;
	margin-bottom: 20rpx;
	border-radius: 16rpx;
	box-shadow: 4rpx 2rpx 12rpx 2rpx rgba(0, 0, 0, 0.03);
}

.title-bd {
	margin-bottom: 0;
	padding: 30rpx 0 20rpx 20rpx;
	border-radius: 16rpx 16rpx 0 0;
	background-image: url('');
	background-size: 100%;

	.more-btn {
		top: 28rpx;
	}
}

.wapper_count {
	padding: 0 0 26rpx 20rpx;
}


</style>
